<template>
  <div class="main-body flex-center">
    <div class="navbar">
      <div :class="['nav']" v-for="(item, i) in programList" :key="i" @click="togglePanel(item)">
        <div class="nav-body">
          <img :src="item.picUrl" :alt="item.programName" />
          <p>{{ item.programName || '' }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {},
  data() {
    return {};
  },
  computed: {
    programList() {
      const { nav = [] } = this.$store.state;
      return nav.map((item) => {
        const { viewUrl, ...rest } = item;
        const match = viewUrl?.match(/template_(\d+)\.html/);
        return {
          ...rest,
          type: 'program',
          component: match ? `info${match[1]}` : ''
        };
      });
    }
  },
  mounted() {},
  methods: {
    togglePanel(row) {
      this.$emit('setComponent', row);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.navbar {
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */
  scroll-behavior: smooth; /* 平滑滚动 */
  padding: 0 210px;
  width: 100%;
  max-height: 100%;
  .nav {
    float: left;
    width: 25%;
    padding: 10px;
    overflow: hidden;
    text-align: center;
    .nav-body {
      width: 100%;
      background: #009ee0;
      border-radius: 40px;
      height: 284px;
      padding: 50px 0;
      img {
        height: 86px;
        margin: 0 auto;
        display: block;
        object-fit: cover;
      }
      p {
        font-size: 42px;
        color: #fff;
        line-height: 98px;
      }
    }
    &:nth-child(2) {
      .nav-body {
        background: #0097a7;
      }
    }
    &:nth-child(3) {
      .nav-body {
        background: #f5605f;
      }
    }
    &:nth-child(4) {
      .nav-body {
        background: #009ee0;
      }
    }
    &:nth-child(5) {
      .nav-body {
        background: #ef6c00;
      }
    }
    &:nth-child(6) {
      .nav-body {
        background: #009ee0;
      }
    }
    &:nth-child(7) {
      .nav-body {
        background: #ab47bc;
      }
    }
    &:nth-child(8) {
      .nav-body {
        background: #fcc503;
      }
    }
  }
}
</style>
